<template>
    <div class="push-content-container">
        <div class="push-list" v-if="pushs.length === 1">
            <p class="description">{{pushs[0].content}}</p>
            <!--指挥中心新增订单-->
            <div v-if="pushs[0].type_id=='1'" class="btn-list">
                <!-- <a-button type="primary" @click="showEditPrice(pushs[0].id)">修改价格</a-button> -->
                <a-button type="primary" @click="showAcceptOrder(pushs[0].id)">确认订单内容</a-button>
                <a-button type="primary" @click="showRejectOrder(pushs[0].id)">拒绝</a-button>
            </div>
            <!--指挥中心同意或拒绝订单，接受或拒绝取消订单,周期扣款或重新修改扣款通知-->
            <div v-if="[3,4,5,6,15,16,35,36,45].includes(pushs[0].type_id)">
                <a-button type="primary" @click="updatePush(pushs[0].id,1)">确定</a-button>
            </div>
            <!--指挥中心申请取消订单-->
            <div v-if="pushs[0].type_id =='2'" class="btn-list">
                <a-button type="primary" @click="showAgreeCancelOrderModal(pushs[0].id)">同意取消订单</a-button>
                <a-button type="primary" @click="showDisagreeCancelOrderModal(pushs[0].id)">不可取消</a-button>
            </div>
            <!--指挥中心申请取消取消周期-->
            <div v-if="pushs[0].type_id =='14'" class="btn-list">
                <a-button type="primary" @click="showAgreeCancelPeriod(pushs[0].id,1)">同意取消此周期</a-button>
                <a-button type="primary" @click="showDisagreeCancelPeriod(pushs[0].id,0)">不可取消</a-button>
            </div>
        </div>
        <div v-else class="more-list">
            <div class="head">
                <p class="description"><span>1/{{pushs.length}}</span><span>{{pushs[0].content}}</span></p>
                <div class="linked-buttons">
                    <!--指挥中心新增订单-->
                    <div v-if="pushs[0].type_id=='1'" class="btn-list">
                        <!-- <a-button type="primary" @click="showEditPrice(pushs[0].id)">修改价格</a-button> -->
                        <a-button type="primary" @click="showAcceptOrder(pushs[0].id)">确认订单内容</a-button>
                        <a-button type="primary" @click="showRejectOrder(pushs[0].id)">拒绝</a-button>
                    </div>
                    <!--指挥中心同意或拒绝订单，接受或拒绝取消订单,周期扣款或重新修改扣款通知-->
                    <div v-if="[3,4,5,6,15,16,35,36,45].includes(pushs[0].type_id)">
                        <a-button type="primary" @click="updatePush(pushs[0].id,1)">确定</a-button>
                    </div>
                    <!--指挥中心申请取消订单-->
                    <div v-if="pushs[0].type_id =='2'" class="btn-list">
                        <a-button type="primary" @click="showAgreeCancelOrderModal(pushs[0].id)">同意取消订单</a-button>
                        <a-button type="primary" @click="showDisagreeCancelOrderModal(pushs[0].id)">不可取消</a-button>
                    </div>
                    <!--指挥中心申请取消取消周期-->
                    <div v-if="pushs[0].type_id =='14'" class="btn-list">
                        <a-button type="primary" @click="showAgreeCancelPeriod(pushs[0].id,1)">同意取消此周期</a-button>
                        <a-button type="primary" @click="showDisagreeCancelPeriod(pushs[0].id,0)">不可取消</a-button>
                    </div>
                    <div class="image" @click="active = !active" :class="{active: active}"></div>
                </div>
            </div>
            <transition name="show">
            <div class="tail" v-show="active">
                <div class="push-list" v-for="(v, k) in restPushs" :key="k">
                    <p class="description"><span>{{k+2}}/{{pushs.length}}</span><span>{{v.content}}</span></p>
                    <!--指挥中心新增订单-->
                    <div v-if="v.type_id=='1'" class="btn-list">
                        <!-- <a-button type="primary" @click="showEditPrice(v.id)">修改价格</a-button> -->
                        <a-button type="primary" @click="showAcceptOrder(v.id)">确认订单内容</a-button>
                        <a-button type="primary" @click="showRejectOrder(v.id)">拒绝</a-button>
                    </div>
                    <!--指挥中心同意或拒绝订单，接受或拒绝取消订单,周期扣款或重新修改扣款通知-->
                    <div v-if="[3,4,5,6,15,16,35,36,45].includes(v.type_id)">
                        <a-button type="primary" @click="updatePush(v.id,1)">确定</a-button>
                    </div>
                    <!--指挥中心申请取消订单-->
                    <div v-if="v.type_id =='2'" class="btn-list">
                        <a-button type="primary" @click="showAgreeCancelOrderModal(v.id)">同意取消订单</a-button>
                        <a-button type="primary" @click="showDisagreeCancelOrderModal(v.id)">不可取消</a-button>
                    </div>
                    <!--指挥中心申请取消取消周期-->
                    <div v-if="v.type_id =='14'" class="btn-list">
                        <a-button type="primary" @click="showAgreeCancelPeriod(v.id,1)">同意取消此周期</a-button>
                        <a-button type="primary" @click="showDisagreeCancelPeriod(v.id,0)">不可取消</a-button>
                    </div>
                </div>
            </div>
            </transition>
        </div>
        <a-modal v-model="showeditprice" title="修改价格" okText="确定" cancelText="撤回" @ok="updatePush(push_id,1)"
                 centered
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="order-change-modal">
                <div>
                    每周期所需积分变更为：
                    <a-input v-model="form_price.cash" style="width:100px"/>
                </div>
                <div class="text-area">
                    <a-form :form="editPriceForm">
                        <a-form-item>
                            <a-textarea placeholder="请输入费用变更原因" maxLength="70" v-decorator="['form_price.reason', {
                                rules: [{
                                    required: true, message: '请填写原因' }, {
                                    max: 70, message: '字数不超过70'
                                }]
                            }]" :rows="6"/>
                        </a-form-item>
                    </a-form>
                </div>
                <div class="add-order-wrapper">
                    <p>订单总计 {{order.period}} 个周期</p>
                    <p>每周期原预计收取 {{order.cash}} 积分，共计 {{order.total}} 积分</p>
                    <p>现变更为每周期 {{form_price.cash}} 积分，共计 {{form_price.total}} 积分</p>
                </div>
            </div>
        </a-modal>
        <!--接受订单-->
        <a-modal v-model="showacceptorder" title="接受确认"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <template slot="footer">
                <div>
                    <a-button key="back" type="primary" @click="cancelAcceptorder">再想想</a-button>
                    <a-button key="submit" type="primary" :disabled="disButton" @click="updatePush(push_id, 1)">确定
                    </a-button>
                </div>
            </template>
            <div class="confirm-wrapper-order">
                <div>
                    <p>此订单交发送至指挥中心确认，请核对以下信息：</p>
                    <div class="content">
                        <p>工作地址为：{{order.address}}</p>
                        <p v-if="order.type_id == 3">飞行面积：{{order.area}}平方公里</p>
                        <p v-else-if="order.type_id == 4">描点个数：{{order.area}}个</p>
                        <p v-else="order.type_id == 5">飞行面积：{{order.area}}公里</p>
                        <p>订单周期：{{order.period}}周期</p>
                        <p>订单备注：{{order.remark ? order.remark : '无'}}</p>
                        <p>服务费：{{parseFloat(order.total - order.urgent_fee).toFixed(2)}}积分<p>
                        <p>加急费：{{order.urgent_fee == 0 ? 0 : parseFloat(order.urgent_fee).toFixed(2)}}积分</p>
                        <p>费用预计：{{parseFloat(order.total).toFixed(2)}}积分</p>
                    </div>
                    <a-checkbox @change="spaceChange" value="1" :style="{margin: '20px auto'}">
                        <span :style="{fontSize: '16px'}">已经获取空域批文</span>
                    </a-checkbox>
                    <p>您将同意此订单</p>
                </div>
            </div>
        </a-modal>
        <!--拒绝订单-->
        <a-modal v-model="showrejectorder" title="拒绝订单" okText="确定" cancelText="再想想" @ok="updatePush(push_id, 0)"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <a-form :form="rejectOrderForm">
                <a-form-item>
                    <a-textarea placeholder="请输入拒绝原因" maxLength="70" v-decorator="['refuse_reason', {
                        rules: [{
                            required: true, message: '请填写原因' }, {
                            max: 70, message: '字数不超过70'
                        }]
                    }]" :rows="6"/>
                </a-form-item>
            </a-form>
            <i style="color:#d74341">{{error}}</i>
        </a-modal>
        <!--同意取消订单-->
        <a-modal v-model="agreeCancelOrder" title="同意取消订单" okText="取消订单" cancelText="再想想" @ok="operateAgreeCancelOrder"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="confirm-wrapper">
                <p>取消此订单将返还客户  {{refund}}  积分，是否取消此订单并返还积分？</p>
            </div>
        </a-modal>
        <!--不可取消订单-->
        <a-modal v-model="disagreeCancelOrder" title="不可取消" okText="拒绝申请" cancelText="再想想" @ok="operateDisagreeCancelOrder"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="confirm-wrapper">
                <p>确定是否拒绝此申请？</p>
            </div>
        </a-modal>
        <!--同意取消此周期-->
        <a-modal v-model="agreeCancelPeriod" title="同意取消此周期" okText="取消此周期" cancelText="再想想" @ok="operateAgreeCancelPeriod"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="confirm-wrapper">
                <p>确定取消此周期？</p>
            </div>
        </a-modal>
        <!--不可取消此周期-->
        <a-modal v-model="disagreeCancelPeriod" title="不可取消" okText="拒绝申请" cancelText="再想想" @ok="operateDisagreeCancelPeriod"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard = 'false'
                 :maskClosable = 'false'>
            <div class="confirm-wrapper">
                <p>确定是否拒绝此申请？</p>
            </div>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: 'push',
        props: ["order", 'pushs'],
        data() {
            return {
                form_price: {
                    cash: 0,
                    reason: '',
                    total: 0,
                },
                had_space: false,
                showeditprice: false,
                showacceptorder: false,
                showrejectorder: false,
                agreeCancelOrder: false,
                agreeCancelId: '',
                disagreeCancelOrder: false,
                disagreeCancelId: '',
                agreeCancelPeriod: false,
                disagreeCancelPeriod: false,
                handleId: '',
                disButton: true,
                push_id: 0,
                error: '',
                active: false,
                refund:0,
                rejectOrderForm: this.$form.createForm(this),
                editPriceForm: this.$form.createForm(this),
            }
        },
        computed: {
            restPushs() {
                return this.pushs.slice(1);
            }
        },
        methods: {
            cancelAcceptorder() {
                this.showacceptorder = false
            },
            spaceChange(e) {
                this.had_space = e.target.checked
                this.disButton = !e.target.checked
            },
            showEditPrice(id) {
                this.push_id = id
                this.form_price.cash = this.order.cash
                this.showeditprice = true
            },
            showAcceptOrder(id) {
                this.push_id = id
                this.showacceptorder = true
            },
            showRejectOrder(id) {
                this.push_id = id
                this.showrejectorder = true
            },
            updatePush(id, handle) {
                let params = {status: 1, handle: handle}
                let flag = false;
                if (this.showacceptorder) {
                    params.had_space = this.had_space
                    this.showacceptorder = false
                    //flag = true
                }
                if (this.showrejectorder) {
                    this.rejectOrderForm.validateFields((err, values) => {
                        if (!err) {
                            params.refuse_reason = values.refuse_reason
                            this.showrejectorder = false
                            
                        }else{
                            flag = true
                        }
                    })
                }
                
                if (this.showeditprice) {
                    this.editPriceForm.validateFields((err, values) => {
                        if (!err) {
                            params.reason = values.form_price.reason
                            this.showeditprice = false 
                        }else{
                            flag = true
                        }
                    })
                }
                if (this.agreeCancelOrder) {
                    this.agreeCancelOrder = false
                    //flag = true
                }
                if (this.disagreeCancelOrder) {
                    this.disagreeCancelOrder = false
                    //flag = true
                }
                if (this.agreeCancelPeriod) {
                    this.agreeCancelPeriod = false
                    //flag = true
                }
                if (this.disagreeCancelPeriod) {
                    this.disagreeCancelPeriod = false
                    //flag = true
                }
                if(flag){
                    return false
                }
            
                this.http('put', 'push/update?id=' + id, Object.assign(this.form_price, params)).then(res => {
                    if (res.status == 200) {
                        this.$emit('refresh', this.order.id);
                        //this.showacceptorder = false;
                        if (!res.had_push) {
                            this.$store.dispatch("SetOrderPush", res.had_push);
                        }
                        if(res.msg){
                            this.$message.success(res.msg, 1)
                        }
                    } else {
                        this.$message.error(res.msg, 1)
                    }
                })
            },
            savePrice() {
                this.form_price.push_type = 8
                this.http('put', 'orders/update?id=' + this.order.id, this.form_price).then(res => {
                    this.showeditprice = false
                    if (res.status == 200) {
                        this.updatePush()
                        this.$message.success(res.msg, 1)

                    } else {
                        this.$message.error(res.msg, 1)
                    }
                })
            },
            showAgreeCancelOrderModal(id) {
                this.http('get', 'orders/refund', {order_id: this.order.id}).then(res => {
                    this.refund = res
                })
                this.agreeCancelOrder = true;
                this.agreeCancelId = id;
            },
            operateAgreeCancelOrder() {
                this.updatePush(this.agreeCancelId, 1);
            },
            showDisagreeCancelOrderModal(id) {
                this.disagreeCancelOrder = true;
                this.disagreeCancelId = id;
            },
            operateDisagreeCancelOrder() {
                this.updatePush(this.disagreeCancelId, 0);
            },
            showAgreeCancelPeriod(id, handle) {
                this.push_id = id
                this.handleId = handle
                this.agreeCancelPeriod = true
            },
            operateAgreeCancelPeriod() {
                this.updatePush(this.push_id, this.handleId)
            },
            showDisagreeCancelPeriod(id, handle) {
                this.push_id = id
                this.handleId = handle
                this.disagreeCancelPeriod = true
            },
            operateDisagreeCancelPeriod() {
                this.updatePush(this.push_id, this.handleId)
            }
        },
        watch: {
            'form_price.cash': function (val) {
                this.form_price.total = val * this.order.period  
                
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../assets/scss/mixin";

    .push-content-container {
        & > .push-list {
            width: 100%;
            padding: 10px 20px;
            @include fj();
            align-items: center;
            border-bottom: 4px solid #1E2026;

            .description {
                max-width: 750px;
                font-size: 16px;
            }

            @media screen and (max-width: 1366px) {
                .description {
                    max-width: 550px;
                }
            }

            .btn-list {
                .ant-btn + .ant-btn {
                    margin-left: 15px;
                }
            }
        }

        & > .more-list {
            position: relative;
            & > .head {
                padding: 10px 20px;
                border-bottom: 4px solid #1E2026;
                @include fj();
                align-items: center;
                width: 100%;

                .description {
                    max-width: 700px;
                    font-size: 16px;
                    @include fj(flex-start);

                    span + span {
                        margin-left: 10px;
                    }
                }

                & > .linked-buttons {
                    @include fj(flex-end);
                    align-items: center;

                    .image {
                        @include wh(30px, 30px);
                        background: url("./../assets/images/arrow-down.svg") center no-repeat;
                        margin-left: 15px;
                        cursor: pointer;
                        @include transition(transform, .3s, cubic-bezier(0.645, 0.045, 0.355, 1));
                        &.active {
                            transform: rotate(-180deg);
                            -webkit-transform: rotate(-180deg);
                            -moz-transform: rotate(-180deg);
                            -ms-transform: rotate(-180deg);
                            -o-transform: rotate(-180deg);
                        }
                    }

                    .btn-list {
                        .ant-btn + .ant-btn {
                            margin-left: 15px;
                        }
                    }
                }

                @media screen and (max-width: 1366px) {
                    .description {
                        max-width: 550px;
                    }
                }
            }

            & > .tail {
                position: absolute;
                width: 100%;
                background: #293043;
                & > .push-list {
                    padding: 10px 20px;
                    border-bottom: 4px solid #1E2026;
                    @include fj();
                    align-items: center;
                    width: 100%;

                    .description {
                        max-width: 700px;
                        font-size: 16px;
                        @include fj(flex-start);

                        span + span {
                            margin-left: 10px;
                        }
                    }

                    .btn-list {
                        .ant-btn + .ant-btn {
                            margin-left: 15px;
                        }
                    }

                    @media screen and (max-width: 1366px) {
                        .description {
                            max-width: 550px;
                        }
                    }
                }
            }
        }
    }

    .confirm-wrapper {
        width: 100%;
        @include centering;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-flow: column;
        p {
            font-size: 16px;
        }
    }

    .confirm-wrapper-order {
        width: 100%;
        @include fj(flex-start);
        flex-flow: column;
        & > div {
            .content {
                margin-top: 10px;
                margin-left: 30px;
                & > p + p {
                    margin-top: 10px;
                }
            }
        }
        p {
            font-size: 16px;
        }
    }

    .text-area {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .order-change-modal {
        font-size: 16px;
        .add-order-wrapper {
            & > p + p {
                margin-top: 10px;
            }
        }
    }

    .show-enter-active {
        transition: all 0.3s ease;
    }

    .show-leave-active {
        transition: all 0.3s ease;
    }

    .show-enter, .show-leave-to {
        transform: translateY(-10px);
        opacity: 0;
    }
</style>